<template>
  <div class="slideBar-box">
    <el-menu :default-active="this.defaultActive" :router="true" :default-openeds="openArr">
      <el-sub-menu
        :index="groupindex + ''"
        :class="groupitem.title === 'noGroup' ? 'side-bar-no-group' : ''"
        v-for="(groupitem, groupindex) in groupMenus"
        v-show="groupitem.group.length > 0"
        :key="groupindex"
      >
        <template #title>
          <span>{{ groupitem.title }}</span>
        </template>
        <el-sub-menu
          :index="groupindex + '-' + childindex"
          v-show="groupitem.childs"
          v-for="(childitem, childindex) in groupitem.childs"
          :key="groupindex + '-' + childindex"
        >
          <template #title>{{ childitem.title }}</template>
          <el-menu-item
            v-for="(menuItem, menuIndex) in childitem.group"
            :index="'/' + currentPath + '/' + menuItem.path"
            :key="menuIndex"
            v-show="childitem.group.length > 0 && menuItem?.meta?.title"
          >
            {{ menuItem.meta && menuItem.meta.title ? menuItem.meta.title : 'no title' }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item
          v-for="(menuItem, menuIndex) in groupitem.group"
          :index="'/' + currentPath + '/' + menuItem.path"
          :key="menuIndex"
          v-show="menuItem?.meta?.title"
        >
          {{ menuItem.meta && menuItem.meta.title ? menuItem.meta.title : 'no title' }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, reactive, watch } from 'vue'
import { PermissionModule } from '@/common/store/modules/permission'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'sideBar',
  components: {},
  // 如没有一级菜单，则title传noGroup
  // 例 groupSettings: {
  //   enterprise: {
  //     title: 'noGroup'
  //   }
  // }
  props: {
    groupSettings: {}
  },
  // ----------------生命周期-----------------------
  setup(props: any) {
    const ROUTER = useRouter()
    const ROUTE = useRoute()
    const state = reactive({
      defaultActive: '',
      openArr: [],
      groupMenus: [],
      accountMenus: [],
      menus: [],
      primaryPath: '',
      currentPath: ''
    })
    const menus: any = []
    const { groupSettings } = toRefs(props)
    const _groupMenus = () => {
      menus.value = getMenu()
      return getGroupMenus(menus.value)
    }
    // 监听路由，实现应用中心交互
    watch(
      () => ROUTE,
      () => {
        let routePath = []
        routePath = ROUTE.path.split('/')
        if (routePath.length > 2) {
          state.defaultActive = '/' + routePath[1] + '/' + routePath[2]
        }
      },
      { deep: true }
    )
    // 配置menu组
    const getGroupMenus = (menus: []) => {
      const groupMenus: any = []
      Object.keys((groupSettings as any).value).some((key) => {
        const groupItem: any = {
          title: '',
          group: []
        }
        const group: any = []
        menus.forEach((menusitem: any) => {
          if (menusitem.meta && menusitem.meta.group && menusitem.meta.group === key) {
            group.push(menusitem)
          }
        })
        groupItem.title = (groupSettings as any).value[key].title || '未配置title'
        groupItem.group = group
        if ((groupSettings as any).value[key].groupSettings) {
          groupItem.childs = getGroupMenus(menus)
        }
        groupMenus.push(groupItem)
      })
      return groupMenus
    }
    // 获取menu列表
    const getMenu = () => {
      let menus: any = []
      const PERMISSIONMODULE = PermissionModule()
      PERMISSIONMODULE.dynamicRoutes.forEach((item: any) => {
        // console.log(item.children, 'item')
        if (item.name == 'adminLayout') {
          state.accountMenus = item.children
        } else if (item.name == 'customerServiceLayout') {
          state.accountMenus = item.children
        }
      })
      state.accountMenus.forEach((route: any) => {
        if (state.primaryPath.includes(route.path)) {
          menus = route.children
        }
      })
      console.log(menus, 'menus')
      if (!state.defaultActive && state.currentPath && menus.length > 0) {
        state.defaultActive = '/' + state.currentPath + '/' + menus[0].path
        ROUTER.push({ path: state.defaultActive })
      }
      return menus
    }
    onMounted(() => {
      let routePath = []
      routePath = ROUTER.currentRoute.value.path.split('/')
      state.primaryPath = routePath[1]
      state.currentPath = routePath[1]
      console.log(routePath, 'routePath')
      if (routePath.length > 2) {
        state.defaultActive = '/' + state.currentPath + '/' + routePath[2]
      }
      state.groupMenus = _groupMenus()
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.slideBar-box {
  padding: 16px 0 8px;
  gap: 8px;
  width: 240px;
  height: 100vh;
  background: var(--mc-gray2-color);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  font-size: 14px;
  box-sizing: border-box;
  overflow: auto;
  .router-link-active {
    li {
      color: $c-main !important;
      background-color: #dddee0 !important;
    }
  }
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
  -webkit-border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.secondMenu {
  padding-left: 28px !important;
}
</style>
<style lang="stylus">
.slideBar-box {
  .el-menu {
    background-color: transparent;
    border-right: 0;
  }

  .el-menu__first, .el-sub-menu {
    .el-menu {
      .el-menu-item {
        width: 216px;
        height: 32px;
        border-radius: 4px;
        margin: 0 auto;
        margin-right auto !important
        font-size: 14px !important;
        color: rgba(0, 0, 0, 0.88);
        text-align: left;
        line-height: 32px;
        font-weight: normal;
        box-sizing border-box
        margin-bottom 8px
      }

      .el-menu-item.is-active {
        width: 216px;
        background: linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF;
        border-radius: 4px;
        margin: 0 auto;
        margin-bottom 8px
      }

      .el-menu-item:hover, .el-menu-item:focus {
        color: $c-main;
        background: #E5F3FD;
      }
    }

    .el-sub-menu__title {
      font-size: 14px !important;
      height: 32px;
      line-height: 32px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88)
      margin-bottom 8px
      span {
        padding-right: 20px;
      }
    }
    .el-sub-menu__title:hover{
      background: transparent;
    }

    .el-menu-item-group__title {
      display: none;
    }
  }

  .thirdthMenu {
    .el-submenu__title {
      padding-left: 28px !important;
    }

    .el-menu-item {
      padding-left: 42px !important;
    }
  }
}

.side-bar-no-group {
  .el-sub-menu__title {
    display: none;
  }
  .el-menu{
    display block !important
    .el-menu-item{
      padding-left 8px !important
    }
  }
}
</style>
